<template>
  <el-dialog v-model="dialogVisible" :title="title" width="40%" style="padding: 4vh;" :close-on-click-modal="false"
             :destroy-on-close="true">
    <el-form>
      <el-form-item label="上级菜单：">
        <el-select v-if="addMenuInfo.menuType=='M'" placeholder="目录" :disabled="addMenuInfo.menuType == 'M'"></el-select>
        <el-select v-if="addMenuInfo.menuType=='C'" :placeholder="addMenuInfo.menuType == 'M' ? '目录' : '请选择上级目录/菜单'" :disabled="addMenuInfo.menuType == 'M'" v-model="addMenuInfo.menuLeveupId">
          <el-option v-if="addMenuInfo.menuType=='C'" v-for="(item, index) in menuOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
        <el-cascader v-if="addMenuInfo.menuType=='F'"
            v-model="addMenuInfo.menuLeveupId"
            :options="menuIconOptions"
            :props="props"
            placeholder="请选择二级菜单"
            @change="handleChange"
          />
      </el-form-item>
      <el-form-item label="菜单类型：">
        <el-radio-group v-model="addMenuInfo.menuType">
          <el-radio value="M" v-on:change="init">目录</el-radio>
          <el-radio value="C" v-on:change="init">菜单</el-radio>
          <el-radio value="F" v-on:change="init">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单图标：" v-if="addMenuInfo.menuType == 'M' || addMenuInfo.menuType == 'C'">
        <ElIconPicker v-model="addMenuInfo.icon"></ElIconPicker>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="菜单名称：">
            <el-input placeholder="请输入菜单名称" v-model="addMenuInfo.menuName"></el-input>
          </el-form-item>
        </el-col>
        <!--   <el-col :span="2">
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="显示排序：">
            <el-input-number :min="1" :max="10" controls-position="right" style="width: 100%;" v-model="addMenuInfo.orderNum" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="路由地址：" v-if="addMenuInfo.menuType == 'M' || addMenuInfo.menuType == 'C'">
        <el-input placeholder="请输入路由地址" v-model="addMenuInfo.path" ></el-input>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12" v-if="addMenuInfo.menuType == 'C'">
          <el-form-item label="组件路径：">
            <el-input placeholder="请输入组件路径" v-model="addMenuInfo.component"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="2">
        </el-col> -->
        <el-col :span="12" v-if="addMenuInfo.menuType == 'C' || addMenuInfo.menuType == 'F'">
          <el-form-item label="权限字符：">
            <el-input placeholder="请输入权限标识"  v-model="addMenuInfo.perms"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="addMenuInfo.menuType == 'M' || addMenuInfo.menuType == 'C'" :gutter="20">
        <el-col :span="12">
          <el-form-item label="显示状态：">
            <el-radio-group v-model="addMenuInfo.visible">
              <el-radio value="0" >显示</el-radio>
              <el-radio value="1">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单状态：">
            <el-radio-group v-model="addMenuInfo.status">
              <el-radio value="0">显示</el-radio>
              <el-radio value="1">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="addMenuSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>
import { ref,defineEmits } from 'vue'
import ElIconPicker from '../utils/ElIconPicker.vue'
import {getMenuToML,getMenuToMLAZ,addMenu,updateMenu} from '../api/sys/menu'
defineProps({
  catalogueNameList: {
    required: true,
    type: Array,
  }
})
const emit = defineEmits(['menuInit'])
// 表单
const addMenuInfo = ref({
  menuId:undefined,
  menuName: "",
  parentId: 0,
  orderNum: 0,
  path: "",
  component: "",
  menuType: "M",
  visible: "0",
  status: "0",
  perms: "",
  icon: "",
  isFrame:'1'
})

const props= ref({
  emitPath:false,//绑定的内容只获取最后一级的value值。
  multiple: true,
})

const title = ref()



const selectml = async()=>{
  // 查询目录
  let res = await getMenuToML()
if(res!=undefined){
  let resList = res.data.data
  menuOptions.value = []
  for(let ele of resList){
    menuOptions.value.push({"value":ele.menuId,"label":ele.menuName})
  }
}

// 查询目录以及子菜单
let res2 = await getMenuToMLAZ()
if(res2!=undefined){
  let resList = res2.data.data.menus
  console.log("rerrrr",resList)
  menuIconOptions.value = []
  let children = []
  for(let ele of resList){
    if(ele.children!=[]){
        for(let el of ele.children){
          children.push({"value":el.menuId,"label":el.menuName})
        }
    }
    menuIconOptions.value.push({"value":ele.menuId,"label":ele.menuName,"children":children})
    children=[]
  }
  console.log(menuIconOptions);
  
}
}


const handleChange = (value) => {
  console.log(value)
}

const init = ()=>{
  addMenuInfo.value.menuLeveupId=("")
}



// 新增/修改
const addMenuSubmit = async()=>{
  console.log();
  
  try {
    if(addMenuInfo.value.menuId != undefined){
      console.log("修改")
      await updateMenu(addMenuInfo.value)
      restart()
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
    }else{
      console.log("新增")
      await addMenu(addMenuInfo.value)
      restart()
      ElMessage({
        message: '新增成功',
        type: 'success',
      })
    }
  } catch (e) {
    console.log(e)
    ElMessage({
      message: '失败',
      type: 'error',
    })
  }
  
}

const cancel = ()=>{
  restart()
}

const restart = ()=>{
  addMenuInfo.value = {
    menuId:undefined,
  menuName: "",
  parentId: 0,
  orderNum: 0,
  path: "",
  component: "",
  menuType: "M",
  visible: "0",
  status: "0",
  perms: "",
  icon: "",
  isFrame:'1'
  } 

  dialogVisible.value = false
  emit("menuInit")
}

const menuOptions = ref([])
// 菜单图标
const menuIconOptions = ref([])
// 是否显示对话框
const dialogVisible = ref(false)

const openUP = (row) => {
  console.log(row);
  title.value=row.menuType == 'M' ? '修改目录' : '修改菜单/按钮'
  addMenuInfo.value = {
  menuId:row.menuId,
  menuName: row.menuName,
  parentId: row.parentId,
  orderNum: row.orderNum,
  path: row.path,
  component: row.component,
  menuType: row.menuType,
  visible: row.visible,
  status: row.status,
  perms: row.perms,
  icon: row.icon,
  isFrame: row.isFrame,
  menuLeveupId: row.parentId
  }
  dialogVisible.value = true
}

const open = () =>{
  title.value=addMenuInfo.menuType == 'M' ? '添加目录' : '添加菜单/按钮'
  dialogVisible.value = true
}

// 向外暴露方法
defineExpose({
  open,
  selectml,
  openUP,
})


</script>
<style scoped></style>